<template>
  <div>
    <div
      class="mou_up"
      v-show="dir"
      ref="mou_up"
      @scroll.passive="getScroll($event)"
    >
      <a href="javascript:;" class="icon_up" @click="btn_top"> </a>
    </div>
    <div class="mou_button">
      <img src="./img/down_qrcode.png" alt="" />
      <p>扫码下载手机端</p>
      <a href="javascript:;" @click="btn_but">PC版下载
        <span></span>
      </a>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dir: false,
    };
  },
  methods: {
    getScroll(event) {
      let scroll = document.documentElement.scrollTop;
      if (scroll > 700) {
        this.dir = true;
      } else {
        this.dir = false;
      }
    },
    btn_top(e) {
      document.documentElement.scrollTop = 0;
    },
    btn_but(e){
      document.documentElement.scrollTop = 999999
    }
  },
  mounted() {
    window.addEventListener("scroll", this.getScroll, true);
  },
};
</script>
<style scoped>
.mou_up {
  position: fixed;
  z-index: 100;
  bottom: 10px;
  right: 70px;
  width: 48px;
  height: 48px;
}
.icon_up {
  display: block;
  overflow: hidden;
  line-height: 300px;
  background: url("./img/sprite.png") no-repeat;
  width: 50px;
  height: 50px;
}
.mou_button {
  position: fixed;
  right: 30px;
  bottom: 70px;
  padding-bottom: 10px;
  border-radius: 6px;
  overflow: hidden;
  background-color: #fff;
  box-shadow: 0 0 6px rgb(0 0 0 / 10%);
}
.mou_button img {
  display: block;
  width: 130px;
  height: 130px;
}
.mou_button a {
  display: block;
  width: 120px;
  padding-top: 5px;
  margin: 5px auto 0;
  border-top: 1px solid #eee;
  font-size: 16px;
  color: #2a2a2a;
  text-align: center;
  text-decoration: none;
}
.mou_button a span{
      display: inline-block;
    background: url("./img/sprite.png") no-repeat -200px 0;
    width: 8px;
    height: 14px;
    margin-left: 3px;
    vertical-align: -3px;
}
</style>